<template>
  <Layout>
    <el-card
      shadow="never"
      style="min-height: 400px; margin-bottom: 20px; padding: 0px 0px 20px 0px"
    >
      <el-tabs v-model="activeTab" type="card">
        <div>
          <el-row style="min-height: 200px">
            <el-col
              :span="8"
              v-for="(item, index) in content"
              :key="'followers' + index"
              style="padding: 10px"
            >
              <el-card
                shadow="hover"
                style="font-size: 13px; color: #606266; line-height: 20px"
              >
                <i class="el-icon-star-off"></i>&emsp;
                <a style="text-decoration: none; cursor: pointer">{{
                  item.node.name
                }}</a>
                <br />
                <i class="el-icon-message"></i>&emsp;
                <a
                  :href="item.node.htmlUrl"
                  target="_blank"
                  style="text-decoration: none; cursor: pointer"
                  >TA的主页</a
                >
                <br />
                <img
                  :src="item.node.avatarUrl"
                  style="width: 100%; border-radius: 5px; margin-top: 5px"
                />
              </el-card>
            </el-col>
          </el-row>
          <div style="text-align: center; margin-top: 10px">
            <Pager :info="$page.allSocial.pageInfo" />
          </div>
        </div>
      </el-tabs>
    </el-card>
  </Layout>
</template>

<page-query>
query($page: Int) {
  allSocial (perPage: 3, page: $page) @paginate {
  pageInfo {
    totalPages
    currentPage
  }
   edges {
    node {
      name
      avatarUrl
    }
  }
  }
}
</page-query>


<script>
import { Pager } from "gridsome";

export default {
  components: {
    Pager,
  },
  name: "social",
  data() {
    return {
      followersTotal: "",
      followingTotal: "",
      activeTab: "followers",
      followers: {
        query: {
          page: 1,
          pageSize: 10,
          pageNumber: 1,
        },
        loading: false,
        list: [],
      },
      following: {
        query: {
          page: 1,
          pageSize: 10,
          pageNumber: 1,
        },
        loading: false,
        list: [],
      },
    };
  },
  computed: {
    content() {
      return this.$page.allSocial.edges;
    },
  },
  methods: {},
};
</script>
<style lang='scss' scoped>
</style>
